<template>
  <div class="z-test-map">
    <z-chart height="604px" :chart-option="chartOption" />
    <div class="z-test-map-too">
      <!-- 每段文字对齐 0 20 40 60 80 100 -->
      <div class="z-test-map-too-text">0</div>
      <div class="z-test-map-too-text">20</div>
      <div class="z-test-map-too-text">40</div>
      <div class="z-test-map-too-text">60</div>
      <div class="z-test-map-too-text">80</div>
      <div class="z-test-map-too-text">100</div>
    </div>
  </div>
</template>

<script>
//import ZChart from "@/components/echarts/zchart";
//import data from '@/static/hunan1.json'

export default {
  name: "index",
  //components: { ZChart },
  data() {
    // https://blog.csdn.net/snow_cake/article/details/84315159?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.add_param_isCf&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.add_param_isCf
    return {
      chartOption: {
        geo: [
          {
            map: "Map",
            aspectScale: 1,
            itemStyle: {
              normal: {
                borderWidth: 8,
                borderColor: "#062153",
                areaColor: "#0e2d69",
                shadowColor: "#081029",
                shadowBlur: 8,
                shadowOffsetX: 0,
                shadowOffsetY: 6
              }
            }
          },
          {
            map: "Map",
            aspectScale: 1,
            itemStyle: {
              normal: {
                borderWidth: 4,
                borderColor: "#0885E6",
                areaColor: "#0e2d69",
                shadowColor: "#081029",
                shadowBlur: 8,
                shadowOffsetX: 0,
                shadowOffsetY: 6
              }
            }
          }
        ],
        visualMap: {
          type: "piecewise",
          splitNumber: 5,
          itemWidth: 60,
          itemHeight: 18,
          pieces: [
            {
              start: 0,
              end: 0,
              label: "0",
              color: "#0e2d69"
            },
            {
              start: 0,
              end: 20,
              label: "20",
              color: "#163c82"
            },
            {
              start: 20,
              end: 40,
              label: "40",
              color: "#154297"
            },
            {
              start: 40,
              end: 60,
              label: "60",
              color: "#174baf"
            },
            {
              start: 60,
              end: 80,
              label: "80",
              color: "#2963D3"
            }
          ],
          seriesIndex: [1],
          left: "center",
          orient: "horizontal",
          itemGap: 5,
          backgroundColor: "#0a1b55",
          showLabel: false,
          controller: {
            inRange: {
              symbol: "rect"
            }
          }
        },
        series: [
          {
            name: "定位点",
            type: "effectScatter",
            coordinateSystem: "geo",
            label: {
              show: true,
              position: "bottom",
              color: "#fff",
              formatter: obj => obj.name
            },
            itemStyle: {
              normal: {
                color: "#36ffb1"
              }
            },
            // effectType: 'ripple',
            // showEffectOn: 'emphasis', // 高亮（hover）的时候显示特效。
            // silent: true, // 图形是否不响应和触发鼠标事件
            // hoverAnimation: false,
            // legendHoverLink: false,
            rippleEffect: {
              period: 104,
              brushType: "fill"
            },
            symbolSize: 6,
            zlevel: 1,
            data: []
          },
          {
            type: "map",
            zlevel: 0,
            aspectScale: 1,
            geoIndex: 2,
            map: "Map",
            data: {},
            itemStyle: {
              normal: {
                areaColor: "#323c48",
                borderColor: "#2F5BAF",
                borderWidth: 1
              },
              emphasis: {
                areaColor: "rgba(19,74,172,0.97)"
              }
            },
            label: {
              normal: {
                // show: true, //显示省份标签
                textStyle: {
                  color: "#fff", //省份标签字体颜色
                  fontSize: 12
                }
              },
              emphasis: {
                // 对应的鼠标悬浮效果
                show: false,
                textStyle: {
                  color: "#fff"
                }
              }
            }
          }
        ]
      }
    };
  },
  methods: {
    getGeoJson() {
      this.formatMapData(data.features);
    },
    formatMapData(Json) {
      let mapData = [];
      let geoData = [];
      let mapJson = {};
      Json.forEach(item => {
        geoData.push({
          name: item.properties.name,
          value: item.properties.centroid.concat(1)
        });
        mapData.push({
          name: item.properties.name,
          value: [0, 20, 40, 60, 80][(Math.random() * 5) | 0],
          level: item.properties.level,
          cityCode: item.properties.adcode
        });
      });
      // geoJson必须这种格式
      mapJson.features = Json;
      // 去渲染echarts
      this.initECharts({ mapData, mapJson, geoData });
    },
    initECharts(option) {
      this.$echarts.registerMap("Map", option.mapJson);
      this.chartOption.series[0].data = option.geoData;
      this.chartOption.series[1].data = option.mapData;
    }
  },
  mounted() {
    this.$nextTick(this.getGeoJson);
  }
};
</script>

<style scoped lang="scss">
.z-test-map {
  position: relative;
  background: #0f2165;
}

.z-test-map-too {
  position: absolute;
  width: 330px; // 每个 itemWidth 是 60，itemGap 是 5，一共 230
  height: 28px; // 每个 itemHeight 是 18，itemGap 是 5，一共 24
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
}

.z-test-map-too-text {
  color: #ade1ff;
  font-size: 14px;
  position: absolute;
  top: 50%;
  &:first-child {
    left: 5px;
    transform: translate(-50%, -50%);
  }

  &:nth-child(2) {
    left: 65px;
    transform: translate(-50%, -50%);
  }

  &:nth-child(3) {
    left: 130px;
    transform: translate(-50%, -50%);
  }
  &:nth-child(4) {
    left: 195px;
    transform: translate(-50%, -50%);
  }
  &:nth-child(5) {
    left: 260px;
    transform: translate(-50%, -50%);
  }
  &:nth-child(6) {
    left: 325px;
    transform: translate(-50%, -50%);
  }
}
</style>